import React, { Component } from "react";
import {
  View,
  TouchableOpacity,
  Text,
  ScrollView,
  Animated
} from "react-native";
import NavBarConfig from "../modules/NavBar";
import http from "../../util/http";
import { NOTICE } from "../../config/Api";
import { isScrollBottom } from "../../util/util";
import moment from "moment";
import noticeStyles from "../../style/pages/notice";

class NoticeList extends Component {
  static navigationOptions = ({ navigation }) =>
    NavBarConfig(
      {
        headerTitle: "公告列表",
        headerRight: []
      },
      navigation
    );

  state = {
    pageNo: 0,
    list: [],
    totalPage: 0,
    isEditing: false,
    translateX: new Animated.Value(0)
  };

  async getNoticeList() {
    if (this.state.pageNo === this.state.totalPage && this.state.pageNo > 0)
      return;
    let data = await http.get(NOTICE, {
      page: this.state.pageNo
    });

    this.setState({
      pageNo: this.state.pageNo + 1,
      list: data.data.list,
      totalPage: Math.ceil(data.data.count / data.data.take)
    });
  }

  contentViewScroll(e) {
    isScrollBottom(e, () => {
      this.getNoticeList();
    });
  }

  componentWillMount() {
    this.getNoticeList();
  }

  render() {
    return (
      <ScrollView onMomentumScrollEnd={this.contentViewScroll.bind(this)}>
        <View style={noticeStyles.bgtListView}>
          {this.state.list.map(notice => (
            <View
              key={notice.id}
              style={[
                noticeStyles.bgtListItem,
                { marginLeft: this.state.translateX }
              ]}
            >
              <TouchableOpacity
                onPress={() =>
                  this.props.navigation.navigate("NoticeDetail", {
                    id: notice.id
                  })
                }
              >
                <Text style={noticeStyles.msgInfo}>
                  [平台公告] {moment(new Date(notice.publishtime)).utcOffset(new Date(notice.publishtime).getTimezoneOffset()).format("YYYY-MM-DD")}
                </Text>
                <Text style={noticeStyles.msgTitle}>{notice.title}</Text>
              </TouchableOpacity>
              <View style={noticeStyles.listButtonContainer}>
                <TouchableOpacity style={[noticeStyles.buttonItem]}>
                  <Text style={[noticeStyles.buttonItem, noticeStyles.hadRead]}>
                    標為已讀
                  </Text>
                </TouchableOpacity>
                <TouchableOpacity style={[noticeStyles.buttonItem]}>
                  <Text style={[noticeStyles.buttonItem, noticeStyles.delete]}>
                    刪除
                  </Text>
                </TouchableOpacity>
              </View>
            </View>
          ))}
        </View>
        {/* <button className="msg-edit-button">编 辑</button> */}
      </ScrollView>
    );
  }
}

export default NoticeList;
